import React, {useState} from 'react';
import {useLocation} from 'umi';
import {PageContainer, ProCard} from "@ant-design/pro-components";
import DelayStat from "./DelayStat";
import HistoryThroughputStat from "./HistoryThroughputStat";
import MediaPair from "./MediaPair";
import ThroughputStat from "./ThroughputStat";
import StageStat from "./StageStat";
import Log from "@/pages/Log";
import AlarmRule from "@/pages/AlarmRule";
import {Link} from "@@/exports";

const DataMediaPair: React.FC = () => {

  const location = useLocation();

  const state = location?.state as { pipelineId: number, channelId: number,action: string }
  const pipelineId = state?.pipelineId;
  const channelId = state?.channelId;
  const [action,setAction] = useState<string>(state?.action || 'mediaPair');
  return (
    <PageContainer
      breadcrumb={{
        items: [
          {
            path: '/admin',
            breadcrumbName: '管理页',
          },
          {
            path: '/channel',
            breadcrumbName: 'Channel管理',
          },
          {
            path: '/pipeline',
            breadcrumbName: 'Pipeline管理',
          },
          {
            path: '/data-media-pair',
            breadcrumbName: '映射关系管理',
          },
        ],
        itemRender: (route, params, routes, paths) => {
          const lastSecond = routes.indexOf(route) === routes.length - 2;
          const last = routes.indexOf(route) === routes.length - 1;
          const url = '/' + paths.join('/');
          // 添加自定义参数到链接中
          return lastSecond ?
            <Link to={url} state={{channelId: channelId}}>{route.breadcrumbName}</Link> : last ?
              <span>{route.breadcrumbName}</span> : <Link to={url}>{route.breadcrumbName}</Link>

        },
      }}
    >
      <ProCard gutter={[0, 24]} tabs={{type: 'line',activeKey:action,onChange:(tab) => setAction(tab)}} >
        <ProCard.TabPane key="mediaPair" tab="映射关系" destroyInactiveTabPane={true}>
          <MediaPair pipelineId={pipelineId} channelId={channelId}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="throughtput" tab="吞吐量" destroyInactiveTabPane={true}>
          <ThroughputStat pipelineId={pipelineId}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="delayStat" tab="延迟时间" destroyInactiveTabPane={true}>
          <DelayStat pipelineId={pipelineId}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="stageStat" tab="同步进度" destroyInactiveTabPane={true}>
          <StageStat pipelineId={pipelineId}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="historyThroughtput" tab="历史吞吐量" destroyInactiveTabPane={true}>
          <HistoryThroughputStat pipelineId={pipelineId}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="monitor" tab="监控列表" destroyInactiveTabPane={true}>
          <AlarmRule pipelineId={pipelineId} wrapContainer={false}/>
        </ProCard.TabPane>
        <ProCard.TabPane key="log" tab="日志" destroyInactiveTabPane={true}>
          <Log pipelineId={pipelineId} wrapContainer={false}/>
        </ProCard.TabPane>
      </ProCard>
    </PageContainer>
  );
};

export default DataMediaPair;
